<template>
    <div id="tmpl">
        <div class="postcomment">
            <h3>提交评论</h3>
            <p class="topline"></p>
            <textarea placeholder="请发表您的看法" v-model="postcontent"></textarea>
            <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
        </div>

        <!--获取评论-->
        <div class="getcom">
            <h3>评论列表</h3>
            <div class="list" v-for="item in list">
                <div class="content" v-text="item.content"></div>
                <span class="user" v-text="item.user_name"></span> <span class="time">{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
            </div>
        </div>
        <mt-button type="primary" size="large" @click="getmore">获取更多</mt-button>
    </div>
</template>

<script>
    import common from '../../kits/common.js';
    import {Toast} from 'mint-ui';
    export default {
        props:['id'],
        data(){
            return {
                postcontent: '',
                list: [],
                indexpage: 1
            }
        },
        methods: {
            getmore(){
                this.indexpage++;
                this.getComment(this.indexpage);
            },
            postcomment(){
                if(this.postcontent.trim().length > 0) {
                    var url = common.apidomain + '/api/postcomment/' + this.id;
                    this.$http.post(url,{content:this.postcontent},{emulateJSON:true}).then(function(res){
                        Toast(res.body.message);
                    });
                    // 将写入的内容作为假数据最追加到list数组最头部
                    this.list.unshift({add_time:new Date,content:this.postcontent,user_name:'匿名用户'});
                    this.postcontent = '';
                } else {
                    Toast('请输入内容');
                }
            },
            getComment(indexpage){
                var url = common.apidomain + '/api/getcomments/' + this.id + '?pageindex=' + indexpage;
                this.$http.get(url).then(function(res){
                    var data = res.body;
                    if(data.status != 0) {
                        Toast('数据错误，请联系后天人员');
                        console.log(data.message);
                        return
                    }
                    this.list = this.list.concat(data.message);
                });
            }
        },
        created(){
            this.getComment(this.indexpage);
        }
    }
</script>

<style scoped>
    #tmpl {
        margin-bottom: 0;
    }
    .postcomment {
        padding: 5px;
        border-bottom: 1px solid #ccc;
    }
    .postcomment .topline {
        border-top: 1px solid #ccc;
    }
    .postcomment textarea {
        display: block;
    }

    /*获取评论*/
    .getcom {
        padding: 5px;
    }
    .getcom .list {
        padding-top: 5px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    .list .content {
        color: #000;
    }
    .getcom span {
        color: #2f6b9a;
        font-size: 12px;
    }
    .getcom span.time {
        margin-left: 200px;
    }
</style>